<template>
  <div>
    <div>
      <!-- {{ imageUrl }} -->
      {{ fullImageUrl }}
      <!--      :class="isImageType ? 'avatar-uploader' : 'flx-align-center'" -->
      <el-upload
        ref="uploadRef"
        action=""
        :class="isImageType ? diymicUploadClass : 'flx-align-center'"
        :file-list="fileList"
        :multiple="multiple"
        :limit="limit"
        :disabled="disabled"
        :accept="fileType"
        :show-file-list="false"
        :http-request="handleHttpUpload"
        :before-upload="beforeUpload"
        :on-exceed="handleExceed"
      >
        <div v-if="isImageType">
          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div v-if="imageUrl" class="hover-text">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </div> -->

          <img v-if="imageUrl" :src="fullImageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div v-if="imageUrl" class="hover-text">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </div>
        </div>

        <div v-else>
          <slot name="upload-btn">
            <div class="upload-content">
              <el-button type="success" plain @click="handleClick">
                {{ btnText }}
              </el-button>
            </div>
          </slot>
        </div>
      </el-upload>

      <!-- 提示 -->
      <div class="upload-tip" v-if="tipShow">
        <slot name="tip">{{ tipComputed }}</slot>
      </div>
    </div>

    <div class="upload-box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { getFileType } from "@/utils/file/assetsFile";

export default {
  name: "CustomUpload",
  props: {
    btnText: {
      type: String,
      default: "点击上传",
    },
    fileType: {
      type: String,
      default: ".pdf, .jpg, .png, .jpeg",
    },
    fileSize: {
      type: Number,
      default: 60,
    },
    limit: {
      type: Number,
      default: Infinity,
    },
    tipShow: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    handleClick: {
      type: Function,
      default: () => {},
    },
    imageUrl: {
      type: String,
      default: "",
    },
    diymicUploadClass: {
      type: String,
      default: "avatar-uploader",
    },
  },
  data() {
    return {
      uploadList: [],
      uploadLatestFile: null,
      uploadRef: null,
      // uploadFilled: UploadFilled,
    };
  },
  computed: {
    tipComputed() {
      const tip = this.fileType
        .replace(/\./g, "")
        .replace(/,/g, "、")
        .toUpperCase();
      return `支持${tip}格式，大小不得超过${this.fileSize}M`;
    },
    isImageType() {
      return (
        this.fileType.includes(".jpg") ||
        this.fileType.includes(".png") ||
        this.fileType.includes(".jpeg")
      );
    },
    fullImageUrl() {
      if (!this.imageUrl) return "";
      const base = process.env.VUE_APP_BASE_API || "";
      // const path = process.env.VUE_APP_PUBLIC_PATH || "";
      return base + this.imageUrl;
    },
  },
  methods: {
    beforeUpload(rawFile) {
      const extension = getFileType(rawFile.name, 1);
      const fileType = this.fileType.replace(/\./g, "");
      const isAllowedType = fileType.includes(extension);
      if (!isAllowedType) {
        // Notification.warning({
        //   title: "温馨提示",
        //   message: "上传文件格式不正确！",
        // });
        this.$notify({
          title: "温馨提示",
          message: "上传文件格式不正确！",
          type: "warning",
        });
        return false;
      }

      if (rawFile.size / 1024 / 1024 > this.fileSize) {
        // Notification.warning({
        //   title: "温馨提示",
        //   message: `上传文件大小不能超过 ${this.fileSize}M！`,
        // });
        this.$notify({
          title: "温馨提示",
          message: `上传文件大小不能超过 ${this.fileSize}M！`,
          type: "warning",
        });
        return false;
      }

      return true;
    },
    handleExceed() {
      // Notification.warning({
      //   title: "温馨提示",
      //   message: `超出文件上传最大数量：${this.limit}！`,
      // });
      this.$notify({
        title: "温馨提示",
        message: `超出文件上传最大数量：${this.limit}！`,
        type: "warning",
      });
      return false;
    },
    async handleHttpUpload(options) {
      try {
        this.$emit("upload-success", options.file);
        this.$refs.uploadRef?.clearFiles();
      } catch (error) {}
    },
  },
};
</script>

<style scoped lang="scss">
.upload-content {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
}

.upload-box {
  max-height: 400px;
  overflow: auto;
}

.upload-tip {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 32px;
  color: var(--el-label-color-regular);
}
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .el-upload:hover {
    border-color: #409eff;
    // background: #8c939d;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .hover-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 4px;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #fff;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }

  &:hover .hover-text {
    opacity: 1;
  }
}
</style>
